import {on} from '@/libs/tools'

const directives = {
    draggable: {
        inserted: (el, binding, vnode) => {
            let triggerDom = document.querySelector(binding.value.trigger)
            triggerDom.style.cursor = 'move'
            let bodyDom = document.querySelector(binding.value.body)
            let pageX = 0
            let pageY = 0
            let transformX = 0
            let transformY = 0
            let canMove = false
            const handleMousedown = e => {
                let transform = /\(.*\)/.exec(bodyDom.style.transform)
                if (transform) {
                    transform = transform[0].slice(1, transform[0].length - 1)
                    let splitxy = transform.split('px, ')
                    transformX = parseFloat(splitxy[0])
                    transformY = parseFloat(splitxy[1].split('px')[0])
                }
                pageX = e.pageX
                pageY = e.pageY
                canMove = true
            }
            const handleMousemove = e => {
                let xOffset = e.pageX - pageX + transformX
                let yOffset = e.pageY - pageY + transformY
                if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
            }
            const handleMouseup = e => {
                canMove = false
            }
            on(triggerDom, 'mousedown', handleMousedown)
            on(document, 'mousemove', handleMousemove)
            on(document, 'mouseup', handleMouseup)
        },
        update: (el, binding, vnode) => {
            if (!binding.value.recover) return
            let bodyDom = document.querySelector(binding.value.body)
            bodyDom.style.transform = ''
        }
    }
}

export default directives
